<!--  -->
<template>
  <div>
    <div class="mb20">编制依据</div>
    <a-spin :spinning="spinning">
      <a-table bordered :data-source="form.basisList" :columns="columns" :scroll="{ x: 1500 }" :pagination="false" :key="key">
        <!-- 内容 -->
        <template slot="content" slot-scope="text, record, index">
          <span v-if="record.isDeleteButton != 1 || queryInfo.pageType === 'detail'">{{ record.content }}</span>
          <EditableCell :required="true" v-else :key="index + '-content'" :text="text" @change="onCellChange(record, 'content', $event)" :maxLength="30"></EditableCell>
        </template>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <!-- 完成程度 -->
        <template slot="finishjob" slot-scope="text, record, index">
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableCell :required="true" v-else :key="index + '-finishjob'" :text="text" @change="onCellChange(record, 'finishjob', $event)" :maxLength="30"></EditableCell>
        </template>
        <!-- 生成时间 -->
        <template slot="finishTime" slot-scope="text, record, index">
          <span v-if="queryInfo.pageType == 'detail'">{{ text }}</span>
          <EditableDate :required="true" v-else :key="index + '-finishTime'" :text="text" @change="onCellChange(record, 'finishTime', $event)"></EditableDate>
        </template>

        <template slot="contactPhone" slot-scope="text, record, index">
          <!-- <span v-if="record.isDeleteButton != 1 || queryInfo.pageType === 'detail'">{{ record.contactPhone }}</span> -->
          <a-input :value="text" placeholder="" disabled />
        </template>

        <!-- 删除 -->
        <template slot="operation" slot-scope="text, record, index">
          <a-popconfirm v-if="record.isDeleteButton == 1 && queryInfo.pageType !== 'detail'" title="请确认是否要删除？" @confirm="() => onDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>

        <!-- 联系人 -->
        <template slot="contactId" slot-scope="text, record, index">
          <span v-if="queryInfo.pageType == 'detail'">{{ record.contactName }}</span>
          <div v-else class="requiredFormItem">
            <a-select style="width: 100%" v-model="record.contactId" allow-clear showSearch optionFilterProp="label" placeholder="请选择" option-label-prop="label" @change="(id) => changeEmployeeName(id, record)">
              <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
              <template v-else>
                <a-select-option v-for="item in memberList" :key="item.employeeId" :value="item.userId" :label="item.name">
                  <a-tooltip placement="topLeft" :mouseLeaveDelay="0">
                    <template slot="title">
                      {{ item.jobNum }}
                    </template>
                    <div>{{ item.name }}({{ item.phone }})</div>
                  </a-tooltip>
                </a-select-option>
              </template>
            </a-select>
          </div>
        </template>
      </a-table>
      <a-button class="mt20" type="primary" @click="addRow" v-if="form.planType == 1 && queryInfo.pageType !== 'detail'"> 增行 </a-button>
    </a-spin>
  </div>
</template>

<script>
import EditableCell from '../../../projectPlanningTaskList/detail/components/EditableCell'
import EditableDate from '../../../projectPlanningTaskList/detail/components/EditableDate'

import { queryCompilationBasisList } from '@/api/projectManagementPlanning/projectPlanningTaskList'
export default {
  name: 'PlanningTable',
  props: {
    fetching: Boolean,
    form: Object,
    queryInfo: Object,
    memberList: Array
  },
  data() {
    return {
      spinning: false,
      key: new Date().getTime(),
      columns: [
        {
          title: '序号',
          width: 65,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '内容',
          dataIndex: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '完成程度',
          dataIndex: 'finishjob',
          scopedSlots: { customRender: 'finishjob' }
        },
        {
          title: '生成时间',
          dataIndex: 'finishTime',
          scopedSlots: { customRender: 'finishTime' }
        },
        {
          title: '联系人',
          dataIndex: 'contactId',
          width: 200,
          scopedSlots: { customRender: 'contactId' }
        },
        {
          title: '联系方式',
          dataIndex: 'contactPhone',
          scopedSlots: { customRender: 'contactPhone' }
        }
      ]
    }
  },

  components: { EditableCell, EditableDate },

  computed: {},

  watch: {
    'form.planType': {
      handler(val, oldval) {
        if (val !== null && val !== undefined) {
          if (val == 0) {
            if (this.columns.some((v) => v.dataIndex === 'operation')) {
              this.columns.pop()
            }
          } else {
            const opera = {
              title: '操作',
              width: 150,
              dataIndex: 'operation',
              fixed: 'right',
              scopedSlots: { customRender: 'operation' }
            }
            this.columns.push(opera)
            this.$nextTick(() => {
              this.key = this.getGuid()
            })
          }
          if (oldval !== null && oldval !== undefined) {
            this.queryCompilationBasisList()
          }
        }
      },
      immediate: true
    }
  },

  created() {},

  mounted() {},

  methods: {
    getGuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0
        var v = c === 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
    queryCompilationBasisList() {
      this.spinning = true
      const query = {
        id: this.form.id,
        taskDetailId: this.form.taskDetailId,
        type: this.form.planType
      }
      queryCompilationBasisList(query)
        .then((res) => {
          res.data.map((v) => {
            v.guid = this.getGuid()
          })
          res.data.map((v) => {
            if (v.contactId == null) {
              v.contactId = undefined
            }
          })
          this.form.basisList = res.data
          this.spinning = false
        })
        .catch(() => {
          this.spinning = false
        })
    },
    // 删除行
    onDelete(item) {
      const cloneObj = JSON.parse(JSON.stringify(this.form))
      const arr = cloneObj.basisList
        .map((v) => {
          if (v.guid !== item.guid) {
            return v
          }
        })
        .filter((v) => v && v.guid)
      this.form.basisList = arr
    },
    // 新增行
    addRow() {
      const item = {
        content: '',
        finishjob: '',
        finishTime: '',

        contactId: '',
        contactName: '',
        contactPhone: '',
        isDeleteButton: 1,
        guid: this.getGuid()
      }
      this.form.basisList.push(item)
    },
    // 人员选择
    changeEmployeeName(id, item) {
      if (id) {
        const { name, phone, userId } = this.memberList.filter((v) => v.userId === id)[0]
        this.form.basisList.map((v) => {
          if (v.guid === item.guid) {
            v.contactId = userId
            v.contactName = name
            v.contactPhone = phone
          }
        })
      }
    },
    // 更新cell
    onCellChange(item, dataIndex, value) {
      this.form.basisList.map((v) => {
        if (v.guid === item.guid) {
          v[dataIndex] = value
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
</style>